<template>
  <div class="sub-one">
    <div class="one-menu border-bm">
      <div class="large-btn btn1">
        <div>顺序练习</div>
        <div>0/2166</div>
      </div>
      <div class="onemenu-list">
        <div
          class="onemenu-item"
          v-for="(item, index) in topMenuList"
          :key="index"
          @click="gotoNext(item.url)"
        >
          <img :src="item.img" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="one-menu">
      <div class="large-btn btn2" @click="mockExam">
        <div>模拟考试</div>
        <div>仿真冲刺</div>
      </div>
      <div class="onemenu-list">
        <div
          class="onemenu-item"
          v-for="(item, index) in bmMenuList"
          :key="index"
        >
          <img :src="item.img" alt="" />
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topMenuList: [
        {
          img: require("../../assets/icon1.png"),
          title: "优品好课",
          url: "/GoodCourse",
        },
        {
          img: require("../../assets/icon2.png"),
          title: "已购课程",
          url: "/BuyCourse",
        },
        {
          img: require("../../assets/icon3.png"),
          title: "专题练习",
          url: "/SpecialExercises",
        },
        {
          img: require("../../assets/icon4.png"),
          title: "错题收藏",
          url: "/",
        },
        {
          img: require("../../assets/icon5.png"),
          title: "章节练习",
          url: "/ChapterExercise",
        },
      ],
      bmMenuList: [
        {
          img: require("../../assets/icon6.png"),
          title: "2023新题",
          url: "",
        },
        {
          img: require("../../assets/icon7.png"),
          title: "免费试用",
          url: "",
        },
        {
          img: require("../../assets/icon8.png"),
          title: "精选500",
          url: "",
        },
        {
          img: require("../../assets/icon9.png"),
          title: "三力测试",
          url: "",
        },
        {
          img: require("../../assets/icon10.png"),
          title: "考试成绩",
          url: "",
        },
      ],
    };
  },
  methods:{
    mockExam(){
      this.$router.push('/MockExam')
    },
    gotoNext(url){
      this.$router.push(url)
    }
  }
};
</script>

<style lang="scss">
.border-bm {
  border-bottom: 1px solid #e6e6e6;
}

.btn1 {
  background-color: #52abf2;
  border: 1vh solid rgb(203, 230, 251);
}
.btn2 {
  background-color: #2ac092;
  border: 1vh solid rgb(191, 236, 222);
}
.one-menu {
  padding: 5% 0;
  display: flex;
  align-items: center;

  .large-btn {
    cursor: pointer;
    text-align: center;
    color: #fff;
    padding: 2.5% 2%;
    border-radius: 50%;

    margin-right: 8vw;
  }

  .onemenu-list {
    display: flex;
    width: 79%;
    justify-content: space-between;

    .onemenu-item {
      cursor: pointer;
      > div {
        margin-top: 2vh;
        text-align: center;
      }
    }
  }
}
</style>